{% import "post_macros.html" as post_macros %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% if page.title %}{{ config.title }} - {{ page.title }}{% else %}{{ config.title }}{% endif %}</title>

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <!-- Enable responsiveness on mobile devices-->
        <!-- viewport-fit=cover is to support iPhone X rounded corners and notch in landscape-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, viewport-fit=cover">

        <!-- Standard meta tags -->
        {% if page.extra.author %}<meta name="author" content="{{ page.extra.author }}">{% endif %}
        {% if page.summary %}<meta name="description" content="{{ page.summary | safe }}">{% endif %}

        <!-- Open Graph Tags -->
        <meta property="og:site_name" content="{{ config.title }}">
        {% if page %}
        <meta property="og:title" content="{{ page.title }}">
        <meta property="og:url" content="{{ get_url(path=page.path, trailing_slash=false) }}">
        <meta property="og:description" content="{{ page.summary | safe }}">
        {% if page.extra.banner_path %}
        <meta property='og:image' content="{{ resize_image(path=page.extra.banner_path, width=1200, height=627, op="fill", format="auto", quality=75) }}"/>
        <meta property='og:image:width' content="1200"/>
        <meta property='og:image:height' content="627"/>
        {% endif %}
        <meta property="og:type" content="article">
        <meta property="article:published_time" content="{{ page.date | date(format="%Y-%m-%d") }}">
        {% if page.updated %}<meta property="article:modified_time" content="{{ page.updated | date(format="%Y-%m-%d") }}">{% endif %}
        {% if page.extra.author_url %}<meta property="article:author" content="{{ page.extra.author_url }}">{% endif %}
        {% for tag in page.taxonomies.tags %}<meta property="article:tags" content="{{ tag }}">{% endfor %}
        {% else %}
        <meta property="og:type" content="website">
        <meta property="og:url" content="{{ get_url(path="", trailing_slash=false) }}">
        {% endif %}

        <!-- CSS -->
        <link rel="stylesheet" href="{{ get_url(path="main.css", trailing_slash=false) }}">

        <!-- Feeds -->
        {% if config.generate_feed %}<link rel="alternate" type={% if config.feed_filename == "atom.xml" %}"application/atom+xml"{% else %}"application/rss+xml"{% endif %} title="RSS" href="{{ get_url(path=config.feed_filename) | safe }}">{% endif %}

        <!-- Google Analytics -->
        {% if config.extra.google_analytics.enabled %}<script async src="https://www.googletagmanager.com/gtag/js?id={{ config.extra.google_analytics.id }}"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '{{ config.extra.google_analytics.id }}');
        </script>{% endif %}

        <script>
            function setTheme() {
                const time = new Date();
      
                const prev = localStorage.getItem('date');
                const date = String(time.getMonth() + 1) + '.' + String(time.getDate());
      
                const now = time.getTime();
                let sunrise;
                let sunset;
      
                function setBodyClass() {
                    if (now > sunrise && now < sunset) return;
                    document.body.classList.add('dark');
                }
      
                if (date !== prev) {
                    fetch('https://api.ipgeolocation.io/astronomy?apiKey=5ed37d85103e4defa5df4c5298ed5215')
                        .then(res => res.json())
                        .then(data => {
                            sunrise = data.sunrise.split(':').map(Number);
                            sunset = data.sunset.split(':').map(Number);
                    })
                    .catch(() => {
                        sunrise = [7, 0];
                        sunset = [19, 0];
                    })
                    .finally(() => {
                        sunrise = time.setHours(sunrise[0], sunrise[1], 0);
                        sunset = time.setHours(sunset[0], sunset[1], 0);
                        setBodyClass();
                        localStorage.setItem('sunrise', sunrise);
                        localStorage.setItem('sunset', sunset);
                    });
                    localStorage.setItem('date', date);
                } else {
                    sunrise = Number(localStorage.getItem('sunrise'));
                    sunset = Number(localStorage.getItem('sunset'));
                    setBodyClass();
                }
            }
        </script>
    </head>
    
    {% if page %}<body class="single">{% else %}<body class="list">{% endif %}
    
    <!-- Apply theme -->
    <script>
      setTheme();
    </script>

    {% block body %}
        <header class="header">
            <nav class="nav">
                {% if page %}
                <p class="logo"><a href="{{ get_url(path="", trailing_slash=false ) }}">{{ config.title }}</a></p>
                {% else %}
                <h1 class="logo"><a href="{{ get_url(path="", trailing_slash=false ) }}">{{ config.title }}</a></h1>
                {% endif %}
                <ul class="menu">
                    {% block sidebar_nav %}{% for link in config.extra.links %}
                    <li><a href="{{ link.url }}">{{ link.name }}</a></li>
                    {% endfor %}{% endblock sidebar_nav %}
                </ul>
            </nav>
        </header>

        <main class="main">
            {% block content %}
            <div class="posts">
                {% set is_first_page = true %}
                {% if paginator is defined %}
                    {% set pages = paginator.pages %}
                    {% set is_first_page = paginator.current_index == 1 %}
                {% elif section is defined %}
                    {% set pages = section.pages %}
                {% endif %}
                {% for page in pages %}
                {% if loop.index == 1 and is_first_page %}
                <article class="first-entry">{% else %}<article class="post-entry">{% endif %}
                {{ post_macros::page_in_list(page=page)}}
                </article>{% endfor %}
                {% if paginator is defined %}
                <footer class="page-footer">
                    <nav class="pagination">
                        {% if paginator.previous %}<a class="prev" href="{{ paginator.previous }}">← Previous</a>{% else %}<!--Hidden Previous-Button-->{% endif %}
                        {% if paginator.next %}<a class="next" href="{{ paginator.next }}">Next →</a>{% else %}<!--Hidden Next-Button-->{% endif %}
                    </nav>
                </footer>
                {% endif %}
            </div>
            {% endblock content %}
        </main>

        <footer class="footer">
            <span>&copy; {{ now() | date(format="%Y") }} <a href="{{ get_url(path="", trailing_slash=false ) }}">{{ config.title }}</a></span>
            <span>&middot;</span>
            <span>Powered by <a href="https://www.getzola.org" rel="noopener" target="_blank">Zola</a>️</span>
            <span>&middot;</span>
            <span>Theme️ <a href="https://github.com/schoenenberg/zola-paper" rel="noopener" target="_blank">Zola-Paper</a></span>
        </footer>
    {% endblock body %}
    </body>
</html>
